<template>
  <div>
    <el-form
      ref="searchKey"
      :inline="true"
      :model="searchKey"
      :show-message="false"
      :inline-message="true"
      label-position="left"
      label-width="70px"
    >
      <el-form-item label="部门" prop="deptId" label-width="50px">
        <tree-select
          v-model="searchKey.deptId"
          :options="departmentAllListData"
          :normalizer="treeSelectProps"
          placeholder="选择部门"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="发放月份" prop="salaryMonth">
        <el-date-picker
          v-model="searchKey.salaryMonth"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月"
        />
      </el-form-item>

      <el-form-item label="发放类型" prop="salaryType">
        <el-select v-model="searchKey.salaryType" size="small" placeholder="请选择发放类型">
          <el-option label="请选择" value="" />
          <el-option label="工资发放" :value="1" />
          <el-option label="工资补发" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'SalarySearch',
  components: {
    TreeSelect
  },
  mixins: [],
  props: {
    initParams: { // 初始参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    departmentAllListData: {// 搜索参数
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      isShowFilter: false, // 是否显示搜索
      searchKey: {},
      treeSelectProps(node) {
        return {
          id: node.id,
          label: node.label,
          children: node.children,
          isDefaultExpanded: true
        }
      }
    }
  },
  computed: {},
  methods: {
    resetSearchData() { // 重置表单
      this.searchKey = {
        ...JSON.parse(JSON.stringify(this.initParams)),
        ...{
          pageSize: this.searchKey.pageSize
        }
      }
    },
    handleFilter: debounce(function() { // 查询，防抖
      this.searchKey.pageNum = 1
      this.$emit('on-init', this.searchKey)
    }, 300),
    handleReset: debounce(function() { // 重置查询，防抖
      this.resetSearchData()
      this.$emit('on-init', this.searchKey)
    }, 300),
    async initData() { // 初始化数据
    }
  },
  watch: {
    searchParams: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
          this.searchKey = JSON.parse(JSON.stringify(newVal))
        }
      },
      deep: true,
      immediate: true
    }
  },

  created() {
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>

</style>
